<template>
    <view class="chat-page page-content">
        <!-- 消息列表 -->
        <scroll-view class="w-common chat-page-messages page-content-body" scroll-y scroll-with-animation> 测试键盘 </scroll-view>

        <!-- 输入框 -->
        <view class="chat-page-input" :style="style">
            <input class="input-field" v-model="inputText" placeholder="请输入消息..." :adjust-position="false" @confirm="sendMessage" @keyboardheightchange="handleKeyboardheightchange" />
            <view class="send-btn" :class="{disabled: !inputText.trim()}" @click="sendMessage"> 发送 </view>
        </view>
    </view>
</template>

<script setup>
import {ref, computed} from 'vue';
import lodash from 'lodash';

const inputText = ref('');
const keyboardHeight = ref(0);

const style = computed(() => {
    const flag = keyboardHeight.value > 0;
    const height = flag ? `calc(20rpx + ${keyboardHeight.value}px)` : `calc(env(safe-area-inset-bottom))`;
    return `padding-bottom: ${height}; `;
});

// 发送消息的核心逻辑
const sendMessage = async () => {
    uni.$u.toast('发送消息');
};

const handleKeyboardheightchange = lodash.debounce((e) => {
    keyboardHeight.value = e.detail.height;
}, 100);
</script>

<style lang="scss" scoped>
.chat-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
    &-messages {
        flex: 1;
        overflow-y: auto;
    }
    // 输入框区域
    &-input {
        background-color: #fff;
        padding: 20rpx 32rpx env(safe-area-inset-bottom);
        border-top: 1rpx solid #e5e5e5;
        display: flex;
        align-items: center;
        position: relative;
        transition: padding-bottom 0.01s ease-out;

        // 输入框
        .input-field {
            flex: 1;
            background-color: #f8f8f8;
            border-radius: 20rpx;
            padding: 20rpx 32rpx;
            font-size: 32rpx;
            border: none;
            outline: none;
            margin-right: 20rpx;

            &::placeholder {
                color: #999;
            }
        }

        // 发送按钮
        .send-btn {
            min-width: 120rpx;
            height: 80rpx;
            background-color: #95ec69;
            border-radius: 40rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28rpx;
            color: #fff;
            font-weight: 500;
            padding: 0 24rpx;
            transition: all 0.2s ease;

            &:active {
                background-color: #7dd85a;
                transform: scale(0.98);
            }

            &.disabled {
                background-color: #e5e5e5;
                color: #999;
                cursor: not-allowed;
            }
        }
    }
}
</style>
